<template>
	<view class="detail">
		<!-- 轮播 -->
		<swiper class="swiper">
			<swiper-item class="swiper-item" v-for="img in product.imgs" :key="img"><image class="img" :src="img" mode=""></image></swiper-item>
		</swiper>

		<!-- 收藏 -->
		<view class="icon"><image class="icons" src="../../../static/icons/collect.png" mode=""></image></view>

		<!-- sku -->
		<view class="skuList"><view class="sku" :style="{ backgroundColor: d.color }" v-for="d in product.skuList" :key="d.id"></view></view>

		<!-- name -->
		<view class="details">
			<view class="name">
				<view class="cname">{{ product.detail_title }}</view>
				<view class="ename">{{ product.detail_title }}</view>

				<view class="price_nows">{{ product.detail_title }}</view>

				<!-- 富文本 -->
				<view class="richtext"><rich-text class="rich-area" :nodes="product.content"></rich-text></view>
			</view>
		</view>

		<!-- 购买 -->

		<view class="bottom">
			<view class="bottom-boock">
				<view class="service">
					<image class="kf" :src="kf" mode=""></image>
					<view class="kfs">客服</view>
				</view>
				<view class="background"><image class="cart" :src="cart" mode="" @click="addCart"></image></view>

				<view class="buy"><text class="text" @click="addBuy">立即购买</text></view>
			</view>
		</view>

		<!-- 卡片 -->
		<Sku :skuList="skuListCom" @select-sku="handleSelSku" ref="skuCard"></Sku>

		<!-- <Skus :skuList="skuListCom" @select-sku="handleSelSku" ref="skuCard"> </Skus> -->
	</view>
</template>

<script>
import kf from '../../../static/icons/kf.png';
import cart from '../../../static/icons/cart.png';
import productApi from '@/api/kind/details.js';
import Sku from '../sku/sku.vue';
import { checkLogin } from '@/utils/common.js';

export default {
	components: {
		Sku
	},
	data() {
		return {
			productId: '',
			kf,
			cart,
			product: {
				imgs: []
			},
			skuList: []
		};
	},
	onLoad(option) {
		this.productId = option.productId;

		// this.getDetailList()
		this.getDetail();
	},

	computed: {
		skuListCom() {
			for (var i = 0; i < this.skuList.length; i++) {
				if (this.product.imgs.length > i) {
					this.skuList[i].img = this.product.imgs[i];
				} else {
					break;
				}
			}
			return this.skuList;
		}
	},

	methods: {
		getDetail() {
			productApi
				.detail({
					productId: this.productId
				})
				.then(res => {
					this.product = res.data;
					console.log(res);
					//this.product.content = this.product.content.replace(/<img/ig,'<img style="max-width:100%;height:auto;"');
					if (res.data.imgs) {
						this.product.imgs = res.data.imgs.split(',');
					}
					if (this.product) {
						this.skuList = res.data.skuList;
					}
				});
		},
		handleSelSku(rs) {
			console.log(rs);
			var skuObj = {
				skuCode: rs.sku_code,
				gname: this.product.gname,
				coverImg: this.product.cover_img,
				color_text: rs.color_text,
				skuId: rs.id,
				price: rs.price,
				count: rs.count
			};
			if (this.buyType == '0') {
				var buycart = uni.getStorageSync('leju-buycart');
				if (!buycart) {
					buycart = [];
					uni.getStorageSync('leju-buycart', buycart);
				}

				// 时间戳为id

				skuObj.tempId = new Date().getTime();
				buycart.push(skuObj);
				uni.clearStorageSync('leju-buycart', buycart);
				// 提示
				uni.showToast({
					title: '加入购物车',
					duration: 1000
				});
				return;
			}

			rs.gnema = this.product.gname;

			// 构建订单
			var orderObj = {
				userId: this.$store.getters.userId,
				count: rs.count,
				// 运费
				freight: 0,
				// 总价钱
				price: rs.count * rs.price,
				orderDetailList: [skuObj]
			};
			// 存入vuex
			this.$store.commit('order/ADD_ORDER_TEMP', orderObj);

			// 跳转
			uni.navigateTo({
				url: '../../mine/order/detail/detail'
			});
		},

		addCart() {
			checkLogin(() => {
				this.buyType = 0;
				// 打开小卡片
				this.$refs.skuCard.openCard();
			});
		},
		// 打开小卡片
		addBuy() {
			// 		// 1. 判断了是否登陆,如果未登录 直接提示登陆
			// 		// 2. 如果登陆了,则直接在回调里执行下一步

			checkLogin(() => {
				this.buyType = 1;
				// 打开小卡片
				this.$refs.skuCard.openCard();
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.detail {
	// height: 100%;
	// background: #FFFFFF;
	.swiper {
		width: 100%;
		height: 790rpx;

		.swiper-item {
			width: 750rpx;
			height: 100%;

			.img {
				width: 100%;
				height: 100%;
			}
		}
	}

	// 收藏
	.icon {
		width: 100rpx;
		height: 100rpx;
		background-color: #354e44;
		box-shadow: 0 16rpx 24rpx 0 rgba(70, 70, 70, 0.2);
		border-radius: 50%;
		position: absolute;
		margin-top: -50rpx;
		left: 582rpx;

		.icons {
			width: 43rpx;
			height: 44rpx;
			margin-top: 28rpx;
			margin-left: 28.5rpx;
		}
	}

	// sku
	.skuList {
		display: flex;
		margin-top: 90rpx;
		justify-content: center;

		.sku {
			width: 50rpx;
			height: 50rpx;
			margin: 0 20rpx 0 20rpx;
			border-radius: 50%;
		}
	}

	.details {
		margin-top: 28rpx;

		margin: 0 34rpx 200rpx 34rpx;

		.name {
			.cname {
				font-family: PingFangSC-Semibold;
				font-size: 36.4rpx;
				color: #3e3e3e;
				letter-spacing: 2.6rpx;
			}

			.ename {
				font-family: PingFangSC-Regular;
				font-size: 30.8rpx;
				color: #b0b0b0;
				letter-spacing: 2.2rpx;
			}

			.price_nows {
				margin-top: 30rpx;
				font-family: PingFangSC-Regular;
				font-size: 36.4rpx;
				color: #3e3e3e;
				letter-spacing: 2.6rpx;
			}

			// 富文本
			.richtext {
				// margin: 0 auto;
				margin-top: 57rpx;
				box-sizing: border-box;
				// padding: 68rpx;
				overflow: hidden;

				// margin-bottom: 60px;
				::v-deep img {
					width: 100%;
				}
			}
		}
	}

	.bottom {
		.bottom-boock {
			position: fixed;
			bottom: 0;
			left: 0;
			display: flex;
			align-items: center;
			width: 100%;
			height: 150rpx;
			background: #fff;

			.service {
				margin-left: 56rpx;

				.kf {
					width: 38.5rpx;
					height: 33.8rpx;
				}

				.kfs {
					font-family: PingFangSC-Regular;
					font-size: 22rpx;
					color: #3e3e3e;
					letter-spacing: 1.57rpx;
				}
			}

			.background {
				margin-left: 212.9rpx;
				width: 120rpx;
				height: 80rpx;
				background: #e2e2e2;
				border-radius: 14rpx;
				border-radius: 14rpx;
				text-align: center;

				.cart {
					margin-top: 16rpx;
					width: 48rpx;
					height: 48rpx;
				}
			}

			.buy {
				margin-left: 24rpx;
				width: 238rpx;
				height: 80rpx;
				background: #354e44;
				border-radius: 14rpx;
				border-radius: 14rpx;
				text-align: center;

				.text {
					line-height: 80rpx;
					font-family: PingFangSC-Semibold;
					font-size: 32rpx;
					color: #ffffff;
					letter-spacing: 2.29rpx;
				}
			}
		}
	}
}
</style>
